<template>
  <a-drawer
    class="my-drawer"
    :visible="visible"
    @ok="handleSubmit"
    @cancel="handleCancel"
    unmountOnClose
    :width="900"
    ok-text="提交"
  >
    <template #title>
      <CustomTitle :title="title + '付款计划模板'" />
    </template>
    <a-form :model="form" layout="vertical" ref="formRef">
      <a-form-item field="templateName" label="模板名称" required :rules="[{ required: true, message: '请输入模板名称' }]">
        <a-input v-model="form.templateName" placeholder="请输入" max-length="20" />
      </a-form-item>
      <a-form-item field="portraitId" label="业务类型" required :rules="{ required: true, message: '请输入业务类型' }">
        <a-select v-model="form.portraitId" placeholder="请选择" @change="handleChange">
          <a-option v-for="item of portraitOption" :value="item.portraitId" :label="item.portraitName" :key="item.portraitId" />
        </a-select>
      </a-form-item>
      <div class="add-table">
        <a-form-item
          label="付款计划"
          field="planTempalteSaveDTOS"
          class="form-add"
          required
          :validate-trigger="['change', 'input', 'blur', 'focus']"
          :rules="[{ required: true, message: '请添加付款计划' }]"
        >
          <div class="add-table-list" v-for="(items, index) in form?.planTempalteSaveDTOS" :key="items">
            <div class="add-table-header">
              <a-form-item
                :field="`planTempalteSaveDTOS[${index}].nodeName`"
                label="付款节点"
                required
                :rules="[{ required: true, message: '请输入付款节点' }]"
              >
                <a-input
                  class="header-bg"
                  :style="{ width: '274px' }"
                  v-model="items.nodeName"
                  placeholder="请输入"
                  max-length="20"
                />
              </a-form-item>
              <img src="@/assets/images/del.png" alt="" @click="handleDel(index)" style="width: 16px; cursor: pointer" />
            </div>
            <div class="add-table-item">
              <a-row class="grid-demo" :gutter="24">
                <a-col :span="8">
                  <a-form-item
                    :field="`planTempalteSaveDTOS[${index}].taskSettingId`"
                    label="施工节点"
                    required
                    :rules="[{ required: true, message: '请选择施工节点' }]"
                  >
                    <a-select v-model="items.taskSettingId" placeholder="请选择">
                      <a-option
                        v-for="item of taskSettingOption"
                        :value="item.taskSettingId"
                        :label="item.taskName"
                        :key="item.taskSettingId"
                      />
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item
                    :field="`planTempalteSaveDTOS[${index}].computeRule`"
                    label="计算规则"
                    required
                    :rules="[{ required: true, message: '请选择计算规则' }]"
                  >
                    <a-select placeholder="请选择" v-model="items.computeRule">
                      <a-option :value="1">发包总金额*付款比例</a-option>
                      <a-option :value="2">工种发包总价*付款比例</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item
                    :field="`planTempalteSaveDTOS[${index}].payRate`"
                    label="付款比例"
                    required
                    :rules="[{ required: true, message: '请输入付款比例' }]"
                  >
                    <a-input-number v-model="items.payRate" placeholder="请输入" :min="1" :max="100" :precision="2">
                      <template #append>%</template>
                    </a-input-number>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-form-item>
        <div class="flex add" style="cursor: pointer" @click="handleAdd">
          <img src="@/assets/images/add.png" alt="" />
          <div>新增一行</div>
        </div>
      </div>
    </a-form>
  </a-drawer>
</template>

<script setup>
import { ref } from "vue";
import CustomTitle from "@/components/CustomTitle/index.vue";
import { contractAdd, contractUpdate } from "@/apis/contracting";
import { getPortraitList, StageTaskList } from "@/apis/system";
import { Message } from "@arco-design/web-vue";
import { deepClone } from "@/utils";

const emit = defineEmits(["changeList"]);
const visible = ref(false);
const formRef = ref();
const portraitOption = ref([]);
const taskSettingOption = ref([]);
const title = ref("添加");
const form = ref({
  planTempalteSaveDTOS: []
});
// 取消
const handleCancel = () => {
  formRef.value.resetFields();
  visible.value = false;
};
// 新增
const add = () => {
  title.value = "添加";
  form.value = { planTempalteSaveDTOS: [] };
  taskSettingOption.value = [];
  visible.value = true;
};
// 打开编辑
const edit = item => {
  console.log(item);
  title.value = "编辑";
  form.value = {
    ...item,
    planTempalteSaveDTOS: deepClone(item.contracteesList) || []
  };
  delete form.value.contracteesList;
  delete form.value.templateState;
  getTaskList(item.portraitId);
  visible.value = true;
};
// 新增一行
const handleAdd = () => {
  formRef.value.clearValidate(["planTempalteSaveDTOS"]);
  form.value.planTempalteSaveDTOS?.push({ name: "" });
};
// 提交
const handleSubmit = async () => {
  const valid = await formRef.value.validate();
  if (valid) return;
  if (title.value === "添加") {
    await contractAdd(form.value);
  } else {
    await contractUpdate(form.value);
  }
  Message.success(title.value + "成功");
  visible.value = false;
  emit("changeList");
};
// 删除
const handleDel = i => {
  form.value.planTempalteSaveDTOS.splice(i, 1);
};
const portraitList = async () => {
  const { data } = await getPortraitList();
  portraitOption.value = data;
};
const handleChange = value => {
  console.log(value, 9999999);
  getTaskList(value);
  if (form.value.planTempalteSaveDTOS.length > 0) {
    form.value.planTempalteSaveDTOS.map(item => {
      item.taskSettingId = "";
    });
  }
};
const getTaskList = async id => {
  const { data } = await StageTaskList(id, { status: 1 });
  let option = [];
  data.map(item => {
    if (item.templateTaskList) {
      item.templateTaskList.map(items => {
        option.push(items);
      });
    }
  });
  taskSettingOption.value = option;
};
portraitList();
defineExpose({ add, edit });
</script>
<style lang="scss" scoped>
@import "index";
</style>
<style lang="scss">
.my-drawer {
  .arco-drawer-footer {
    box-shadow: 0px -5px 10px 0px rgba(66, 78, 102, 0.15) !important;
    padding: 14px 20px !important;

    .arco-btn {
      padding: 0 46px;
    }

    .arco-btn-secondary {
      background: #f2f3f5;
      border: none;
    }

    .arco-btn-secondary:hover {
      background: #f2f3f5;
      border: none;
    }
  }
}
</style>
